<template>
  <!-- 报警管理页面 -->

  <!-- 警告栏 -->
  <el-card>
    <el-radio-group v-model="radio1" size="large" style="mt">
      <el-radio-button label="严重告警" :value="1">严重告警</el-radio-button>
      <el-radio-button label="紧急告警" :value="2">紧急告警</el-radio-button>
      <el-radio-button label="重要告警" :value="3">重要告警</el-radio-button>
      <el-radio-button label="一般告警" :value="4">一般告警</el-radio-button>
    </el-radio-group>
  </el-card>

  <!-- 警告列表 -->
  <el-card class="mt" v-for="item in alarmList" :key="item.code">
    <!-- 警告信息 -->
    <el-alert
      :title="`${item.address}充电桩充电异常`"
      type="warning"
      show-icon
      class="mb"
    />

    <!-- 警告详情 -->
    <el-descriptions border class="mt" :column="4" direction="vertical">
      <!-- 循环后端数据,展示内容 -->
      <el-descriptions-item v-for="(val, key) in item" :label="getLabel(key)">
        <!-- 如果有报警描述,根据级别显示不同颜色 -->
        <el-tag
          v-if="key == 'level'"
          :type="val == 1 ? 'danger' : val == 2 ? 'warning' : 'info'"
        >
          {{ val == 1 ? "严重告警" : val == 2 ? "紧急告警" : "一般告警" }}
        </el-tag>

        <!-- 如果有报警状态,根据状态显示不同颜色 -->
        <el-text type="danger" v-else-if="key == 'status'">
          {{ val == 1 ? "待指派" : val == 2 ? "处理中" : "处理异常" }}
        </el-text>

        <!-- 其他字段直接显示 -->
        <span v-else>{{ val }}</span>
      </el-descriptions-item>

      <!-- 必须有的按钮 -->
      <el-descriptions-item label="操作">
        <el-button
          :type="item.status == 2 ? 'warning' : 'primary'"
          size="small"
          @click="drawer = true"
          >{{ item.status == 1 ? "指派" : item.status == 2 ? "催办" : "查看" }}</el-button
        >
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <!-- 抽屉组件 -->
  <el-drawer v-model="drawer" title="二次封装分步插件">
    <!-- 引入分步表单组件 -->
    <StepForm
      :steps="steps"
      :form1="form1"
      :form2="form2"
      :form3="form3"
      @handleSubmit="handleSubmit"
    >
      <!-- 第一步: 基本信息 -->
      <template #step-1>
        <el-form :model="formData.basicInfo" :rules="basicRules" ref="form1">
          <el-form-item label="姓名: " prop="name">
            <el-input v-model="formData.basicInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱: " prop="email">
            <el-input v-model="formData.basicInfo.email"></el-input>
          </el-form-item>
          <el-form-item label="电话: " prop="tel">
            <el-input v-model="formData.basicInfo.tel"></el-input>
          </el-form-item>
          <el-form-item label="工号: " prop="no">
            <el-input v-model="formData.basicInfo.no"></el-input>
          </el-form-item>

          <!-- 是否加急 -->
          <el-form-item label="是否加急">
            <el-switch v-model="formData.basicInfo.urgent"> </el-switch>
          </el-form-item>

          <!-- 其他选项 -->
          <el-form-item label="其他选项">
            <el-checkbox-group v-model="formData.basicInfo.other">
              <el-checkbox value="1">更换设备</el-checkbox>
              <el-checkbox value="2">仅维修</el-checkbox>
              <el-checkbox value="3">需拍照片</el-checkbox>
              <el-checkbox value="4">报备</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- 其他备注信息 -->
          <el-form-item label="其他备注信息">
            <el-input type="textarea" v-model="formData.basicInfo.remarks"></el-input>
          </el-form-item>
        </el-form>
      </template>

      <!-- 第二步: 审批信息 -->
      <template #step-2>
        <el-form :model="formData.approvalInfo" ref="form2" :rules="approvalRules">
          <el-form-item label="审批部门" prop="approval">
            <el-select
              placeholder="请选择审批部门"
              v-model="formData.approvalInfo.approval"
            >
              <el-option label="技术部" :value="1"></el-option>
              <el-option label="运维部" :value="2"></el-option>
              <el-option label="客服部" :value="3"></el-option>
              <el-option label="市场部" :value="4"></el-option>
              <el-option label="财务部" :value="5"></el-option>
              <el-option label="总裁办" :value="6"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="抄送部门" prop="cc">
            <el-select
              v-model="formData.approvalInfo.cc"
              multiple
              placeholder="请选择抄送部门"
            >
              <el-option label="技术部" :value="1"></el-option>
              <el-option label="运维部" :value="2"></el-option>
              <el-option label="客服部" :value="3"></el-option>
              <el-option label="市场部" :value="4"></el-option>
              <el-option label="财务部" :value="5"></el-option>
              <el-option label="总裁办" :value="6"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>

      <!-- 第三步: 负责人信息 -->
      <template #step-3>
        <el-form :model="formData.leaderInfo" ref="form3" :rules="leaderRules">
          <el-form-item label="负责人姓名: " prop="leader">
            <el-input v-model="formData.leaderInfo.leader"></el-input>
          </el-form-item>
          <el-form-item label="负责人电话: " prop="leaderPhone">
            <el-input v-model="formData.leaderInfo.leaderPhone"></el-input>
          </el-form-item>
        </el-form>
      </template>
    </StepForm>

    <!-- 提示信息 -->
    <el-result
      icon="warning"
      title="设备编号: CD1001"
      sub-title="请尽快处理该报警,避免影响用户使用"
    >
      <template #extra>
        <el-button type="primary" @click="drawer = false">我已知晓</el-button>
      </template>
    </el-result>
  </el-drawer>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const radio1 = ref<number>(1);

// 引入 alarmApi 接口
import { alarmListApi } from "@/api/alarm";
// 定义报警数据类型
interface AlarmListType {
  description: string; // 报警描述
  address: string; // 设备地址
  equNo: string; // 设备编号
  level: number; // 1 严重告警 2 紧急告警 3 一般告警
  time: string; // 报警时间
  code: number; // 故障代码
  status: number; //1 待指派 2 处理中 3 处理异常
}
// 定义报警数据
const alarmList = ref<AlarmListType[]>([]);
// 获取报警数据
const getAlarmData = async () => {
  const { data } = await alarmListApi();
  alarmList.value = data;
};

onMounted(() => {
  getAlarmData();
});

// 引入 字段映射表
import { getLabel } from "./fieldLabelMap";

// 分步表单逻辑 =================================================

// 控制抽屉显示隐藏
const drawer = ref<boolean>(false);
// 引入分步表单组件
import StepForm from "@/components/stepForm/StepForm.vue";
// 引入表单校验
import type { FormInstance } from "element-plus";

// 定义分步数据(一共有几个步骤)
const steps = ref([
  { title: "基本信息" },
  { title: "审批信息" },
  { title: "负责人信息" },
]);

// 定义表单数据
const formData = ref({
  // 基本信息表单
  basicInfo: {
    name: "",
    email: "",
    tel: "",
    no: "",
    urgent: true,
    other: [],
    remarks: "",
  },
  // 审批信息表单
  approvalInfo: {
    approval: "", // 审批部门
    cc: [], // 抄送部门
  },
  // 负责人信息表单
  leaderInfo: {
    leader: "", // 负责人
    leaderPhone: "", // 负责人电话
  },
});

// 定义表单校验规则
const basicRules = {
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
  ],
  tel: [
    { required: true, message: "请输入电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: ["blur", "change"],
    },
  ],
  no: [{ required: true, message: "请输入工号", trigger: "blur" }],
};
// 审批信息表单校验规则
const approvalRules = {
  approval: [{ required: true, message: "请选择审批部门", trigger: "change" }],
  cc: [{ required: true, message: "请选择抄送部门", trigger: "change" }],
};

// 负责人信息表单校验规则
const leaderRules = {
  leader: [{ required: true, message: "请输入负责人", trigger: "blur" }],
  leaderPhone: [
    { required: true, message: "请输入负责人电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: ["blur", "change"],
    },
  ],
};

// 基本信息表单实例
const form1 = ref<FormInstance>();
// 审批信息表单实例
const form2 = ref<FormInstance>();
// 负责人信息表单实例
const form3 = ref<FormInstance>();

// 提交表单逻辑
import { ElMessage } from "element-plus";
const handleSubmit = () => {
  ElMessage({
    message: "指派成功",
    type: "success",
  });
  drawer.value = false;
  // 重置表单
  form1.value?.resetFields();
  form2.value?.resetFields();
  form3.value?.resetFields();
};
</script>

<style scoped></style>
